<template>
    <div class="content">
        <div id="main" ref="charts" style="width: 800px; height: 800px"></div>
    </div>
</template>
  
  
<script>
import * as echarts from "echarts";
import 'echarts-gl' // echarts 3D插件
// -导入的外部 地图文件  下载地址 https://www.isqqw.com/
import jiangxi from "../../assets/jiangxi.json"
export default {
    data() {
        return {
        }
    },
    created() {
        this.$nextTick(() => {
            this.initCharts();
        })
    },
    methods: {
        // -首先初始化地图 对地图进行配置 然后注册地图 最后使用配置
        initCharts() {
            const charts = echarts.init(this.$refs["charts"]);
            const option = {
                geo: [
                    //#region 第一层
                    {
                        map: "jiangxi",
                        type: 'map3D',
                        zlevel: 9,
                        aspectScale: 1, // 横向拉伸
                        layoutSize: '95%',//大小
                        // 上移
                        layoutCenter: ['50%', '49%'],
                        label: {
                            show: true,
                            normal: {
                                show: true, // 默认地图文字字号和字体颜色
                                fontSize: 12,
                                color: "#ffffff",
                            },
                            emphasis: {
                                show: true,
                                fontSize: 12, // 选中地图文字字号和字体颜色
                                color: "#ffffff",

                            },
                        },
                        regions: [
                            //#region  南昌市
                            {
                                name: '南昌市',
                                regionHeight: 50,//3D地图的厚度
                                itemStyle: {
                                    color: '[1, 1, 1, 1]',
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                    normal: {
                                        opacity: 0,   // 透明度
                                    },
                                    emphasis: {
                                        opacity: 1,   // 透明度
                                    }
                                },

                            },
                            //#endregion

                            //#region 上饶市
                            {
                                name: '上饶市',
                                regionHeight: 50,//3D地图的厚度
                                itemStyle: {
                                    color: '[1, 1, 1, 1]',
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                    normal: {
                                        opacity: 0,   // 透明度
                                    },
                                    emphasis: {
                                        opacity: 1,   // 透明度
                                    }
                                },

                            },
                            //#endregion

                            //#region  宜春市
                            {//单独设置地图区域的样式
                                name: '宜春市',
                                regionHeight: 50,//3D地图的厚度
                                itemStyle: {
                                    color: '[1, 1, 1, 1]',
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                    normal: {
                                        opacity: 0,   // 透明度
                                    },
                                    emphasis: {
                                        opacity: 1,   // 透明度
                                    }
                                },
                                label: {//图形上的文本标签
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                            },
                            //#endregion

                            //#region 萍乡市
                            {//单独设置地图区域的样式
                                name: '萍乡市',
                                regionHeight: 50,//3D地图的厚度
                                itemStyle: {
                                    color: '[1, 1, 1, 1]',
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                    normal: {
                                        opacity: 0,   // 透明度
                                    },
                                    emphasis: {
                                        opacity: 1,   // 透明度
                                    }
                                },
                                label: {//图形上的文本标签
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                            },
                            //#endregion

                            //#region  抚州市
                            {//单独设置地图区域的样式
                                name: '抚州市',
                                regionHeight: 50,//3D地图的厚度
                                itemStyle: {
                                    color: '[1, 1, 1, 1]',
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                    normal: {
                                        opacity: 0,   // 透明度
                                    },
                                    emphasis: {
                                        opacity: 1,   // 透明度
                                    }
                                },
                                label: {//图形上的文本标签
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                            },
                            //#endregion

                            //#region 鹰潭市
                            {//单独设置地图区域的样式
                                name: '鹰潭市',
                                regionHeight: 50,//3D地图的厚度
                                itemStyle: {
                                    color: '[1, 1, 1, 1]',
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                    normal: {
                                        opacity: 0,   // 透明度
                                    },
                                    emphasis: {
                                        opacity: 1,   // 透明度
                                    }
                                },
                                label: {//图形上的文本标签
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                            },
                            //#endregion

                            //#region 赣州市
                            {//单独设置地图区域的样式
                                name: '赣州市',
                                regionHeight: 50,//3D地图的厚度
                                itemStyle: {
                                    color: '[1, 1, 1, 1]',
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                    normal: {
                                        opacity: 0,   // 透明度
                                    },
                                    emphasis: {
                                        opacity: 1,   // 透明度
                                    }
                                },
                                label: {//图形上的文本标签
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                            },
                            //#endregion

                            //#region  吉安市
                            {//单独设置地图区域的样式
                                name: '吉安市',
                                regionHeight: 50,//3D地图的厚度
                                itemStyle: {
                                    color: '[1, 1, 1, 1]',
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                    normal: {
                                        opacity: 0,   // 透明度
                                    },
                                    emphasis: {
                                        opacity: 1,   // 透明度
                                    }
                                },
                                label: {//图形上的文本标签
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                            },
                            //#endregion

                            //#region  九江市
                            {//单独设置地图区域的样式
                                name: '九江市',
                                regionHeight: 50,//3D地图的厚度
                                itemStyle: {
                                    color: '[1, 1, 1, 1]',
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                    normal: {
                                        opacity: 0,   // 透明度
                                    },
                                    emphasis: {
                                        opacity: 1,   // 透明度
                                    }
                                },
                                label: {//图形上的文本标签
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                            },
                            //#endregion

                            //#region  景德镇市
                            {//单独设置地图区域的样式
                                name: '景德镇市',
                                regionHeight: 50,//3D地图的厚度
                                itemStyle: {
                                    color: '[1, 1, 1, 1]',
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                    normal: {
                                        opacity: 0,   // 透明度
                                    },
                                    emphasis: {
                                        opacity: 1,   // 透明度
                                    }
                                },
                                label: {//图形上的文本标签
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                            },
                            //#endregion

                            //#region  新余市
                            {//单独设置地图区域的样式
                                name: '新余市',
                                regionHeight: 50,//3D地图的厚度
                                itemStyle: {
                                    color: '[1, 1, 1, 1]',
                                    borderWidth: 1,
                                    borderColor: '#fff',
                                    normal: {
                                        opacity: 0,   // 透明度
                                    },
                                    emphasis: {
                                        opacity: 1,   // 透明度
                                    }
                                },
                                label: {//图形上的文本标签
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                            },
                            //#endregion

                        ],

                        itemStyle: {
                            normal: {
                                areaColor: {
                                    type: "linear",
                                    x: 1000,
                                    y: 0,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0,
                                        color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                                    },],
                                    global: true, // 缺省为 false
                           
                                },
                                borderColor: "#c0f3fb",
                                // borderWidth: 1,
                                shadowColor: "#8cd3ef",
                                shadowOffsetY: 10,
                                shadowBlur: 120,
                            },
                            emphasis: {
                                areaColor: "rgba(0,254,233,0.6)",
                                // 阴影
                                shadowColor: "rgba(31, 31, 31,0.5)",
                                shadowOffsetY: 10,
                                shadowBlur: 10,
                                shadowOffsetX: 10,

                                // 高亮边框
                                // borderColor: "#00feea",

                                // borderWidth: 0
                            }
                        },
                        textFixed: {
                            Alaska: [20, -20],
                        }
                    },
                    //#endregion

                    //#region 第二层
                    {
                        map: "jiangxi",
                        type: 'map3D',
                        name: 'mySeries',
                        zlevel: -1,
                        aspectScale: 1, // 横向拉伸
                        layoutCenter: ['50%', '49.5%'],//位置
                        layoutSize: '95%',//大小
                        // 贴图
                        shading: 'lambert',
                        label: {
                            show: false,
                            normal: {
                                show: false, // 默认地图文字字号和字体颜色
                                fontSize: 16,
                                color: "#ffffff",
                            },
                            emphasis: {
                                show: false,
                                fontSize: 16, // 选中地图文字字号和字体颜色
                                color: "#ffffff",
                            },
                        },
                        itemStyle: {
                            normal: {
                                opacity: 0.9,
                                areaColor: {
                                    type: "linear",
                                    x: 1000,
                                    y: 0,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0,
                                        color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                                    },],
                                    global: true, // 缺省为 false
                                 
                                },
                                emphasis: {
                                    show: true,
                                    fontSize: 12, // 选中地图文字字号和字体颜色
                                    color: "#ffffff",

                                },
                                // borderColor: "#c0f3fb",
                                // borderWidth: 0.1,
                                shadowColor: "#8cd3ef",
                                shadowOffsetY: 10,
                                shadowBlur: 120,
                            },
                        },

                        textFixed: {

                            Alaska: [20, -20],
                        }
                    },
                    //#endregion

                    //#region 第三层
                    //设置倾斜
                    {
                        map: "jiangxi",
                        type: 'map3D',
                        aspectScale: 1, // 横向拉伸
                        layoutCenter: ['50%', '50%'],//位置
                        layoutSize: '95%',//大小
                        zlevel: -2,
                        label: {
                            show: false,
                        },
                        itemStyle: {
                            normal: {
                                areaColor: {
                                    type: "linear",
                                    x: 1000,
                                    y: 0,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0,
                                        color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                                    },],
                                    global: true, // 缺省为 false
                                },
                                borderColor: "#c0f3fb",
                                // borderWidth: 1,
                                shadowColor: "#8cd3ef",
                                shadowOffsetY: 10,
                                shadowBlur: 120,
                            },

                        },
                        textFixed: {
                            Alaska: [20, -20],
                        }
                    },
                    //#endregion

                    //#region 第四层
                    {
                        map: "jiangxi",
                        zlevel: -1,
                        aspectScale: 1,
                        layoutCenter: ["50%", "52%"],
                        layoutSize: "95%",
                        roam: false,
                        zlevel: -3,
                        silent: false,//是否响应鼠标事件
                        itemStyle: {
                            normal: {
                                color: "rgba(5,21,35,0.1)",
                                // borderWidth: 1,
                                // borderColor:"rgba(17, 149, 216,0.6)",
                                borderColor: "rgba(58,149,253,0.8)",
                                shadowColor: "rgba(172, 122, 255,0.5)",
                                shadowOffsetY: 5,
                                shadowBlur: 15,
                                areaColor: "rgba(5,21,35,1)",
                            },
                            emphasis: {
                                areaColor: "rgba(5,21,35,0.8)",
                                // 阴影
                                shadowColor: "#00feea",
                                shadowOffsetY: 10,

                                shadowBlur: 120,
                                shadowOffsetX: 10,

                                // 高亮边框
                                borderColor: "#00feea",

                                borderWidth: 0
                            }
                        },
                    },
                    //#endregion

                    //#region 第五层
                    {
                        map: "jiangxi",
                        zlevel: -4,
                        aspectScale: 1,
                        layoutCenter: ["50%", "54%"],
                        layoutSize: "95%",
                        roam: false,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                borderColor: "rgba(58,149,253,0.4)",
                                shadowColor: "rgba(65, 214, 255,0.6)",
                                shadowOffsetY: 5,
                                shadowBlur: 15,
                                areaColor: "rgba(5,21,35,0.8)",
                            },

                        },
                        emphasis: {
                            areaColor: "rgba(5,21,35,0.8)",
                            // 阴影
                            shadowColor: "#00feea",
                            shadowOffsetY: 10,
                            shadowBlur: 120,
                            shadowOffsetX: 10,
                            // 高亮边框
                            borderColor: "#00feea",

                            borderWidth: 0
                        }
                    },
                    //#endregion
                ],


                series: [
                    {
                        map: 'jiangxi',
                        name: 'mySeries',
                        top: '1%',
                        right: '-150%',
                        roam: false, //是否开启平游或缩放
                        width: '400%',
                        height: '100%',
                        // 背景贴图
                        type: 'map3D',
                        zoomSensitivity: false,//是否开启缩放和平移/鼠标滑动缩放禁止
                        map: 'jiangxi',
                        zlevel: -2,
                        shading: 'realistic',//着色效果
                        label: {
                            show: false,
                            textStyle: {
                                color: '#fff',
                                fontSize: 0,
                                opacity: 0,
                            
                            }
                        },
                        // 样式
                        itemStyle: {
                            opacity: 1,
                            // 高亮状态
                            emphasis: {
                              opacity: 0,
                            }
                        },
                        viewControl: {
                          
                        
                            // 禁止缩放
                           
                            zoomSensitivity: false,
                            projection: 'orthographic',//投影
                            orthographicSize: 125,//投影大小
                            alpha: 50,//视角绕 x 轴，即上下旋转的角度。
                            beta: 0,//视角绕 y 轴，即左右旋转的角度。
                           
                     
                            zoomSensitivity: 0,//鼠标缩放比例
                            panSensitivity: 0,//鼠标平移比例
                            rotateSensitivity: 0,//鼠标旋转比例
                            alphaSensitivity: 0,//鼠标绕 x 轴，即上下旋转的比例。
                            betaSensitivity: 0,//鼠标绕 y 轴，即左右旋转的比例。
                            target: [0, 0, 0],//视角中心点
                            autoRotate: false,//是否自动旋转
                            autoRotateAfterStill: 0,//多少秒后自动旋转
                            autoRotateSpeed: 0,//自动旋转速度
                            damping: 0,//鼠标缩放、旋转等操作的灵敏度
                    
                        
                       
                            
                        },  
                        realisticMaterial: {//真实感材质相关配置
                            
                            detailTexture: require('../../assets/newbg.jpg'),//地面细节纹理
                            textureTiling: 4,//纹理平铺
                            textureOffset: [1, 0],//纹理偏移
                            nrormalsTexture: require('../../assets/earth.jpg'),//法线贴图
                            roughnessAdjust: 1,//粗糙度调整
                            roughness: 0.2,//粗糙度
                            metalness: 0,//金属度
                        },
                      
                            
                    },
                  
                ]
            };
            // -地图注册 第一个参数的名字必须和 option.geo.map一致
            echarts.registerMap('jiangxi', jiangxi)
            charts.setOption(option);
            charts.on('mouseover', (params) => {
                console.log(params, 'sss')
                if (params.geoIndex == 1) {
                    // console.log('ddd',params.region.label.show)
                    // params.region.label.show = false

                }
            })
        },
    },
};
</script>
<style>
#main {
    /* transform: rotateX('90deg'); */
}
</style>
  
  